<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_定位之相对定位</title>
    <style>
        .box1,.box2{
            width: 200px;
            height: 200px;
            background-color: red;
            border: orange 1px solid;
        }
        .box1{
            position: relative;
            left: 50px;

        }
    </style>
</head>
<body>
<!--
    相对定位：
        如何给元素进行相对定位呢？
            1.给元素设置position属性为relative
            2.设置元素的left、right、top、bottom属性,可以调整元素的位置
        相对定位的参考点在哪里？
            相对于元素本身之前的位置
        相对定位的特点：
            1.不会脱离文档流。元素位置的变化，只是视觉效果上的改变。不会对其他元素产生任何影响。
            2.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
                默认规则是：
                    定位的元素会覆盖在普通元素之上
                    都定位的两个元素，在层级相同的情况下，显示的顺序是按照代码顺序来显示的
            3.left一般不能和right一起设置，top和bottom一般也不一起设置。
            4.相对定位的元素，也能继续浮动，但是不推荐这样做。
            5.相对定位的元素，也能通过margin调整位置，但是不推荐这样做。
    注意：绝大多数情况下，相对定位，会与绝对定位一起使用，来完成布局。
-->

        <div class="box">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>

</body>
</html>